<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义状态学习测试</title>
</head>
<body>

<div id="example"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
    /*
     功能: 自定义组件初始显示我喜欢你，点击后显示你喜欢我
     */

    //1定义组件
    class Like extends React.Component{

        constructor(props){
            super(props);
            //初始化状态
            this.state = {
                date : new Date()
            };
        }

        //组件被从 DOM 中移除后执行，计数器清零
        componentWillUnmount() {
            clearInterval(this.timerID);
        }

        //加载后的回调方法
        componentDidMount(){
            this.timerID = setInterval(()=>this.tick(),1000);
        }

        //更新为当前日期
        tick(){
            this.setState({
                date:new Date()
            });
        }
        //组件返回
        render(){
            return(
                <div>
                    <h1>hello 临江仙!</h1>
                    <h2>This Time is : {this.state.date.toLocaleTimeString()}.</h2>
                </div>
            );
        }
    }

    //2 渲染组件
    ReactDOM.render(<Like/>,document.getElementById("example"))


</script>
</body>
</html>